<template>
  <div class="container">
    <div class="box box-ver content">
      <div class="text">您本次的报销金额为</div>
      <div class="box box-ac money">
        ¥<amount-input :direction="1"></amount-input>
      </div>
    </div>
    <div class="tips box">
      <div class="icon icon-invoice-tips"></div>
      <div v-if="bizAccountBill.iseinvoice === 1" class="tc-666">
        您当前{{bizAccountBill.expenseName}}剩余可用额度为{{bizAccountBill.availableBan}}元，发票金额{{bizAccountBill.checkedInvoice.money}}，最多可报{{bizAccountBill.maxMoney}}元。
      </div>
      <div v-if="bizAccountBill.iseinvoice === 0" class="tc-666">
        <!-- 您每个月额度标准5000元， -->
        目前累计可用额度{{bizAccountBill.availableBan}}元，本次最多可报{{bizAccountBill.maxMoney}}元
      </div>
    </div>
    <div @click="next()" class="bot box box-ac box-jc">
      下一步
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import amountInput from '@/components/amountInput'
export default {
  name: 'baoxiaoStep2',
  components: {
    amountInput
  },
  computed: mapState(['bizAccountBill']),
  methods: {
    next () {
      if (!this.bizAccountBill.amount || +this.bizAccountBill.amount === 0) {
        this.$tools.openToast({
          msg: '请填写报销金额',
          duration: 2000
        })
        return
      }
      this.$router.push('/baoxiaoStep3')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.content{
  margin-top:.35rem;
  background-color:#FFF;
  padding:.25rem .4rem;
  .money{
    font-size:.42rem;
    margin-top:.40rem;
  }
}
.bot{
  position:absolute;
  bottom:0;
  background-color:$themeColor;
  width:100%;
  height:1rem;
  color:#FFF;
  font-size:.36rem;
  z-index:3;
}
</style>
